@import "@/var.scss";

.jiandaoyun {
  .corp-value {
    padding: 100px 0 40px;
    .bricks-description {
      margin: 16px 0 50px;
      font-size: 18px;
      font-weight: 400;
      color: #5e6d82;
      line-height: 25px;
      text-align: center;
    }
    .h-swiper {
      .h-swiper-tab {
        margin-bottom: 60px;
        justify-content: space-around;
        .h-swiper-tab-item {
          position: relative;
          margin: 0;
          width: 180px;
          height: 80px;
          border-radius: 4px;
          text-align: center;
          cursor: pointer;
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2px 8px 0 rgba(0, 130, 120, 0.16);
          &:last-child {
            font-size: 20px;
            line-height: 80px;
            a {
              outline: 0;
              text-decoration: none;
              color: #000;
              cursor: pointer;
              &:hover {
                color: $green;
              }
            }
          }
          &.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            border-radius: 2px;
            background: #0db3a6;
          }
          img {
            width: 154px;
          }
        }
      }
      .h-swiper-container {
        height: 400px;
        box-shadow: 0 0 18px 0 rgb(64 106 103 / 13%);
        .h-swiper-slide .slide-content {
          border-radius: 8px;
          overflow: hidden;
          display: flex;
          width: 1160px;
          .video-btn {
            cursor: pointer;
          }
          .img-corp {
            width: 392px;
            height: 100%;
            .corp-logo-pc {
              width: 100%;
            }
          }
          .txt-box {
            width: 768px;
            display: flex;
            flex-direction: column;
            text-align: left;
            box-shadow: 0 2px 8px 0 rgba(200, 200, 200, 0.16);
            .txt-content {
              padding: 60px 70px 60px 108px;
              img {
                width: 118px;
              }
              .text-info {
                font-size: 16px;
                color: #1f2d3d;
                line-height: 26px;
                margin-bottom: 28px;
                margin-top: 32px;
                position: relative;
                img {
                  width: 20px;
                  position: absolute;
                  top: 0;
                  left: -36px;
                }
              }
              .text-name {
                display: inline-block;
                font-size: 16px;
                color: #1f2d3d;
                line-height: 22px;
                .color-grey {
                  font-size: 14px;
                  color: #5e6d82;
                  margin-left: 15px;
                }
              }
              .look-more {
                display: block;
                font-size: 16px;
                color: #0db3a6;
                line-height: 22px;
                margin-top: 62px;
              }
            }
          }
        }
      }
    }
  }
}
